.todo-app {
  padding: 24px;
  max-width: 600px;
  margin: 0 auto;

  .todo-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

    .ant-typography {
      margin-bottom: 16px;
    }
  }

  .todo-input {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;

    .ant-input {
      flex: 1;
    }
  }

  .todo-list {
    .todo-item {
      display: flex;
      align-items: center;
      padding: 8px 0;
      transition: all 0.3s;

      &.completed {
        .todo-text {
          text-decoration: line-through;
          color: #999;
        }
      }

      .todo-text {
        flex: 1;
        margin: 0 8px;
      }
    }
  }
} 